<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        dd {
            height: 20px;
            transition: height .5s ease;
            overflow: hidden;
        }
        dd.hide {
            height: 0;
        }
    </style>
</head>
<body>
    <!-- <dl>
        <dt>一级标题 1</dt>
        <dd>二级标题 1.1</dd>
        <dd>二级标题 1.2</dd>
        <dd>二级标题 1.3</dd>
        <dd>二级标题 1.4</dd>
    </dl>
    <dl>
        <dt>一级标题 2</dt>
        <dd>二级标题 2.1</dd>
        <dd>二级标题 2.2</dd>
        <dd>二级标题 2.3</dd>
        <dd>二级标题 2.4</dd>
    </dl> -->

    <script>

        const data = [
            {
                label: '一级标题 1',
                children: [
                    {
                        label: '二级标题 1.1',
                    },
                    {
                        label: '二级标题 1.2',
                    },
                    {
                        label: '二级标题 1.3',
                    },
                    {
                        label: '二级标题 1.4',
                    },
                ],
            },
            {
                label: '一级标题 2',
                children: [
                    {
                        label: '二级标题 2.1',
                    },
                    {
                        label: '二级标题 2.2',
                    },
                    {
                        label: '二级标题 2.3',
                    },
                ],
            },
            {
                label: '一级标题 3',
                children: [
                    {
                        label: '二级标题 3.1',
                    },
                    {
                        label: '二级标题 3.2',
                    },
                    {
                        label: '二级标题 3.3',
                    },
                    {
                        label: '二级标题 3.4',
                    },
                    {
                        label: '二级标题 3.5',
                    },
                ],
            },
        ];

        const body = document.body;

        // item: 数组项
        for (const item of data) {
            const dl = document.createElement('dl');
            // 创建dt和dd
            const dt = document.createElement('dt');
            dt.innerText = item.label;

            let flag = true;
            dt.addEventListener('click', function () {
                // 点击dt的时候
                // 选所有的dd
                const dds = dl.querySelectorAll('dd');
                for (const dd of dds) {
                    dd.setAttribute('class', flag ? 'hide' : '');
                }
                flag = !flag;
            });
            dl.appendChild(dt);

            for (const child of item.children) {
                const dd = document.createElement('dd');
                dd.innerText = child.label;
                dl.appendChild(dd);
            }

            body.appendChild(dl);
        }


    </script>
</body>
</html>